﻿<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Editing Grid</title>
    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dojo/resources/dojo.css"type="text/css" />
    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dojox/grid/resources/claroGrid.css"  type="text/css" />

    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dijit/themes/claro/document.css" />
    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dijit/themes/claro/claro.css" />
    <style>* {
    outline: none !important;
}

body {
    margin: 0;
    padding: 2em;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}

button {
	-webkit-transition: background-color 0.2s linear;
	border-radius:4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
	background-color: #E4F2FF;
	background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/form/images/button.png");
	background-position: center top;
	background-repeat: repeat-x;
	border: 1px solid #769DC0;
	padding: 2px 8px 4px;
	font-size:1em;
}

button:hover {
	background-color: #AFD9FF;
	color: #000000;
}

h1 {
	font-size:1.5em;
}

.break
{
float:none;
clear:both;
}

.grid {
	width: 1000px;
	height: 310px;
	border: 1px solid #999;
}

.dojoxGridScrollbox {
	overflow-x: hidden;
}

.results {
	margin: 1em;
	padding: 1em;
	border: 1px solid #999;
}

    </style>

	</head>
	<body class="claro">
		  <span data-dojo-id='button2'>
      Add Row
  </span>

  <span data-dojo-id='button1'>
      Remove Selected Rows
  </span>
		<div id="grid"></div>
		<!-- load dojo and provide config via data attribute -->
		    <script type="text/javascript" src="../dojo-release-1.7.2-src/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async:true"></script>
		<script>
		    require([
				"dojox/grid/DataGrid",
				"dojox/grid/cells",
				"dojox/grid/cells/dijit",
				"dojo/store/Memory",
				"dojo/data/ObjectStore",
				"dojo/date/locale",
				"dojo/currency",
				"dijit/form/DateTextBox",
				"dijit/form/CurrencyTextBox",
				"dijit/form/HorizontalSlider",
                'dojo/on',
				"dojo/domReady!"
			], function (DataGrid, cells, cellsDijit, Memory, ObjectStore, locale, currency,
				DateTextBox, CurrencyTextBox, HorizontalSlider,on) {
			    var grid;
			    function formatCurrency(inDatum) {
			        return isNaN(inDatum) ? '...' : currency.format(inDatum, this.constraint);
			    }
			    function formatDate(inDatum) {
			        return locale.format(new Date(inDatum), this.constraint);
			    }
			    gridLayout = [{
			        defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: center;' },
			        cells: [
						//{ name: 'Id', field: 'id', editable: false /* Can't edit ID's of dojo/data items */ },
						{ name: '实体名称', field: 'EntityName', width: 10, editable: true,
						    widgetClass: DateTextBox,
						    formatter: formatDate,
						    constraint: { formatLength: 'long', selector: "date" }
						},
						{ name: '说明', styles: 'text-align: center;', field: 'Notes', width: 10,
						    type: cells.ComboBox,
						    options: ["normal", "note", "important"]
						},
						{ name: 'Mark', field: 'col2', width: 5, styles: 'text-align: center;',
						    type: cells.CheckBox
						},
						{ name: 'Status', field: 'col3',
						    styles: 'text-align: center;',
						    type: cells.Select,
						    options: ["new", "read", "replied"]
						},
						{ name: 'Message', field: 'col4', styles: '', width: 10 },
						{ name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: { currency: 'EUR' },
						    widgetClass: CurrencyTextBox
						},
						{ name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: { currency: 'EUR' },
						    widgetClass: HorizontalSlider, width: 10
						}
					]
			    }];

			    var data = [
					{ id: 0, col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false, col8: new Date() },
					{ id: 1, col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false, col8: new Date() },
					{ id: 2, col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true, col8: new Date() },
					{ id: 3, col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true, col8: new Date() },
					{ id: 4, col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true, col8: new Date() },
					{ id: 5, col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true, col8: new Date() },
                    			{ id: 5, col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true, col8: new Date() },
                                			{ id: 5, col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true, col8: new Date() },
                                            			{ id: 5, col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true, col8: new Date() },
					{ id: 6, col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false, col8: new Date() }
				];

			    var objectStore = new Memory({ data: data });

			    // global var "test_store"
			    test_store = new ObjectStore({ objectStore: objectStore });


			    /* attach an event handler */
			  //  on(dojo.byId("button2"), 'click',
    //function (e) {
        /* set the properties for the new item: */
        var myNewItem = { id: 7, col1: "Mediate", col2: true, col3: 'Newly added values', col4: 8888 };
        /* Insert the new item into the store:*/
        test_store.newItem(myNewItem);
    //}
   // );
//			    /* attach an event handler */
//			    on(button1, 'click',
//    function (e) {
//        /* Get all selected items from the Grid: */
//        var items = grid.selection.getSelected();
//        if (items.length) {
//            /* Iterate through the list of selected items.
//            The current item is available in the variable
//            "selectedItem" within the following function: */
//            array.forEach(items, function (selectedItem) {
//                if (selectedItem !== null) {
//                    /* Delete the item from the data store: */
//                    store.deleteItem(selectedItem);
//                } /* end if */
//            }); /* end forEach */
//        } /* end if */
//        event.stop(e);
//    }
//    );





			    //	create the grid.
			    grid = new DataGrid({
			        store: test_store,
			        structure: gridLayout,
			        escapeHTMLInData: false,
			        "class": "grid"
			    }, "grid");
			    grid.startup();

			});

		</script>
	</body>
</html>

